<template>
  <div class="app-container">
    <!-- 顶部通知栏 -->
    <div class="top-notice">
      <p>欢迎访问综合服务平台！<a href="#" class="notice-link">最新功能公告 <i class="fa fa-angle-right ml-1"></i></a></p>
    </div>

    <!-- 导航栏 -->
    <header class="header" :class="{ 'header-scrolled': isScrolled }">
      <div class="container">
        <div class="header-content">
          <!-- Logo区域 -->
          <div class="logo-container">
            <router-link to="/" class="logo">
              <div class="logo-icon">
                <span class="logo-text">P</span>
              </div>
              <span class="logo-title">综合服务平台</span>
            </router-link>
          </div>

          <!-- 右侧功能区 -->
          <div class="header-actions">
            <!-- 搜索按钮 -->
            <button class="action-btn" @click="showSearch = !showSearch">
              <i class="fa fa-search"></i>
            </button>

            <!-- 消息通知 -->
            <div class="notification-container">
              <button class="action-btn">
                <i class="fa fa-bell"></i>
              </button>
              <span class="notification-badge" v-if="unreadNotifications > 0">{{ unreadNotifications }}</span>
            </div>

            <!-- 控制台按钮 -->
            <a @click="toConsole" class="console-btn mobile-only" target="_blank">
              <i class="fa fa-cogs"></i>
              <span>控制台</span>
            </a>

            <!-- 用户菜单 -->
            <div class="user-menu">
              <button class="user-btn">
                <img src="https://picsum.photos/id/1005/100" alt="用户头像" class="user-avatar">
                <span class="user-name desktop-only">{{username}}</span>
                <i class="fa fa-angle-down desktop-only"></i>
              </button>

              <!-- 用户下拉菜单 -->
              <div class="user-dropdown">
                <router-link to="/profile" class="dropdown-item">个人中心</router-link>
                <router-link to="/settings" class="dropdown-item">账号设置</router-link>
                <router-link to="/console" class="dropdown-item">
                  <i class="fa fa-cogs mr-2 text-primary"></i>控制台
                </router-link>
                <div class="dropdown-divider"></div>
                <button class="dropdown-item logout" @click="loginOut">退出登录</button>
              </div>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="menu-btn mobile-only" @click="mobileMenuOpen = !mobileMenuOpen">
              <i class="fa fa-bars"></i>
            </button>
          </div>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="mobile-nav" :class="{ 'mobile-nav-open': mobileMenuOpen }">
          <router-link to="/" class="mobile-nav-item active">首页</router-link>
          <router-link to="/introduction" class="mobile-nav-item">平台介绍</router-link>
          <router-link to="/support" class="mobile-nav-item">服务支持</router-link>
          <router-link to="/about" class="mobile-nav-item">关于我们</router-link>
          <router-link to="/help" class="mobile-nav-item">帮助中心</router-link>
          <a @click="toConsole" class="mobile-nav-item">控制台</a>
        </div>

        <!-- 搜索框 -->
        <div class="search-container" :class="{ 'search-open': showSearch }">
          <div class="search-input-wrapper">
            <input type="text" placeholder="搜索平台服务、帮助文档..." class="search-input">
            <i class="fa fa-search search-icon"></i>
          </div>
        </div>
      </div>
    </header>

    <main class="main-content">
      <!-- 内容区域 -->
      <section class="hero-section">
        <div class="container">
          <div class="hero-content">
            <div class="hero-text">
              <h1 class="hero-title">
                一站式综合服务<br>
                <span class="text-primary">平台解决方案</span>
              </h1>
              <p class="hero-description">
                集成多种专业服务，通过直观的入口快速访问各子系统，高效管理您的业务与数据。
              </p>
              <div class="hero-buttons">
                <a href="#services" class="primary-btn">
                  <span>浏览服务</span>
                  <i class="fa fa-arrow-right"></i>
                </a>
                <a @click="toConsole" class="secondary-btn" target="_blank">
                  <i class="fa fa-tachometer"></i>
                  <span>进入控制台</span>
                </a>
              </div>
              <!-- 统计数据 -->
              <div class="stats-container">
                <div class="stat-item">
                  <p class="stat-value text-primary">{{ stats.services }}</p>
                  <p class="stat-label">专业服务</p>
                </div>
                <div class="stat-item">
                  <p class="stat-value text-primary">{{ stats.users }}+</p>
                  <p class="stat-label">活跃用户</p>
                </div>
                <div class="stat-item">
                  <p class="stat-value text-primary">{{ stats.uptime }}%</p>
                  <p class="stat-label">系统可用率</p>
                </div>
              </div>
            </div>

            <!-- 主视觉 -->
            <div class="hero-image-container">
              <div class="hero-image-wrapper">
                <img src="https://picsum.photos/id/180/800/600" alt="平台概览" class="hero-image">
                <div class="image-overlay"></div>
              </div>

              <!-- 装饰元素 -->
              <div class="status-badge system-status desktop-only">
                <div class="badge-icon green-bg">
                  <i class="fa fa-check text-success"></i>
                </div>
                <div class="badge-text">
                  <p class="badge-title">系统正常运行</p>
                  <p class="badge-subtitle">24/7 监控中</p>
                </div>
              </div>

              <!-- 背景光晕 -->
              <div class="image-glow"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 子网站/服务入口 -->
      <section id="services" class="services-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">平台服务入口</h2>
            <p class="section-description">
              点击下方图标进入各子系统，一站式管理您的所有业务
            </p>
          </div>

          <!-- 服务分类标签 -->
          <div class="category-tabs">
            <button class="category-tab"
                    v-for="(category, index) in categories"
                    :key="index"
                    @click="activeCategory = category"
                    :class="{ 'active': activeCategory === category }">
              {{ category }}
            </button>
          </div>

          <!-- 服务卡片网格 -->
          <div class="services-grid">
            <!-- 服务卡片 - 循环渲染 -->
            <div class="service-card"
                 v-for="(service, index) in filteredServices"
                 :key="index"
                 @click="navigateToService(service.path)">
              <div :class="['service-icon', service.iconClass]">
                <i :class="service.icon"></i>
              </div>
              <h3 class="service-name">{{ service.name }}</h3>
              <p class="service-desc">{{ service.desc }}</p>
              <span class="new-badge" v-if="service.new">新功能</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 快捷访问区域 -->
      <section class="quick-access-section">
        <div class="container">
          <div class="section-header section-header-left">
            <h2 class="section-title">快捷访问</h2>
            <p class="section-description">您常用的功能和最近访问的服务</p>
            <a href="#" class="see-all-link">查看全部 <i class="fa fa-angle-right ml-1"></i></a>
          </div>

          <div class="quick-access-grid">
            <!-- 最近活动 -->
            <div class="access-card">
              <div class="card-header">
                <h3 class="card-title">最近活动</h3>
                <a href="#" class="card-action">清除记录</a>
              </div>
              <div class="card-content activities-list">
                <div class="activity-item"
                     v-for="(activity, index) in recentActivities"
                     :key="index">
                  <div class="activity-icon">
                    <i :class="activity.icon"></i>
                  </div>
                  <div class="activity-info">
                    <p class="activity-text">
                      <span class="activity-action">{{ activity.action }}</span>
                      {{ activity.service }}
                    </p>
                    <p class="activity-time">{{ activity.time }}</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 常用功能 -->
            <div class="access-card">
              <div class="card-header">
                <h3 class="card-title">常用功能</h3>
                <a href="#" class="card-action">编辑</a>
              </div>
              <div class="card-content functions-grid">
                <button class="function-item"
                        v-for="(func, index) in commonFunctions"
                        :key="index">
                  <div :class="['function-icon', func.iconClass]">
                    <i :class="func.icon"></i>
                  </div>
                  <span class="function-name">{{ func.name }}</span>
                </button>
              </div>
            </div>

            <!-- 系统状态 -->
            <div class="access-card">
              <div class="card-header">
                <h3 class="card-title">系统状态</h3>
                <span class="status-label green-bg text-success">全部正常</span>
              </div>
              <div class="card-content system-status-list">
                <div class="system-status-item" v-for="(system, index) in systemStatus" :key="index">
                  <div class="status-info">
                    <span class="system-name">{{ system.name }}</span>
                    <span :class="['system-status', system.statusClass]">{{ system.status }}</span>
                  </div>
                  <div class="status-bar">
                    <div class="status-progress" :class="system.barClass" :style="{ width: system.performance + '%' }"></div>
                  </div>
                </div>

                <a href="#" class="status-details-link">查看详细状态报告</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 公告与更新 -->
      <section class="notices-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">公告与更新</h2>
            <p class="section-description">
              了解平台最新动态、功能更新和重要通知
            </p>
          </div>

          <div class="notices-grid">
            <div class="notice-card"
                 v-for="(notice, index) in notices"
                 :key="index">
              <div class="notice-image-container">
                <img :src="notice.image" alt="公告图片" class="notice-image">
              </div>
              <div class="notice-content">
                <div class="notice-meta">
                  <span :class="['notice-tag', notice.tagClass]">{{ notice.tag }}</span>
                  <span class="notice-date">{{ notice.date }}</span>
                </div>
                <h3 class="notice-title">{{ notice.title }}</h3>
                <p class="notice-text">{{ notice.content }}</p>
                <a href="#" class="read-more-link">阅读更多</a>
              </div>
            </div>
          </div>

          <div class="view-all-notices">
            <a href="#" class="all-notices-link">
              <span>查看所有公告</span>
              <i class="fa fa-long-arrow-right"></i>
            </a>
          </div>
        </div>
      </section>

      <!-- 帮助与支持 -->
      <section class="support-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">帮助与支持</h2>
            <p class="section-description">
              遇到问题？我们提供多种方式为您提供支持
            </p>
          </div>

          <div class="support-grid">
            <div class="support-card">
              <div class="support-icon blue-bg">
                <i class="fa fa-book"></i>
              </div>
              <h3 class="support-title">帮助文档</h3>
              <p class="support-desc">
                查阅详细的用户手册和操作指南
              </p>
              <a href="#" class="support-link">浏览文档</a>
            </div>

            <div class="support-card">
              <div class="support-icon green-bg">
                <i class="fa fa-comments"></i>
              </div>
              <h3 class="support-title">在线客服</h3>
              <p class="support-desc">
                工作日 9:00-18:00 在线为您解答
              </p>
              <a href="#" class="support-link">联系客服</a>
            </div>

            <div class="support-card">
              <div class="support-icon purple-bg">
                <i class="fa fa-question-circle"></i>
              </div>
              <h3 class="support-title">常见问题</h3>
              <p class="support-desc">
                查看用户最常遇到的问题及解决方案
              </p>
              <a href="#" class="support-link">查看FAQ</a>
            </div>

            <div class="support-card">
              <div class="support-icon orange-bg">
                <i class="fa fa-video-camera"></i>
              </div>
              <h3 class="support-title">视频教程</h3>
              <p class="support-desc">
                观看详细的操作演示和教程视频
              </p>
              <a href="#" class="support-link">观看教程</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 行动召唤 -->
      <section class="cta-section">
        <div class="container">
          <h2 class="cta-title">准备好开始使用了吗？</h2>
          <p class="cta-description">
            立即进入控制台，体验全方位的服务与管理功能
          </p>
          <a @click="toConsole" class="cta-btn">
            <span>进入控制台</span>
            <i class="fa fa-arrow-right"></i>
          </a>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-brand">
            <div class="logo">
              <div class="logo-icon">
                <span class="logo-text">P</span>
              </div>
              <span class="logo-title">综合服务平台</span>
            </div>
            <p class="brand-description">
              一站式综合服务平台，集成多种专业服务与管理功能，为您提供高效、便捷的业务管理解决方案。
            </p>
            <div class="social-links">
              <a href="#" class="social-link"><i class="fa fa-weixin"></i></a>
              <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
              <a href="#" class="social-link"><i class="fa fa-github"></i></a>
              <a href="#" class="social-link"><i class="fa fa-envelope"></i></a>
            </div>
          </div>

          <div class="footer-links">
            <h4 class="links-title">平台服务</h4>
            <ul class="links-list">
              <li><router-link to="/user-management" class="footer-link">用户管理</router-link></li>
              <li><router-link to="/data-analysis" class="footer-link">数据分析</router-link></li>
              <li><router-link to="/content-management" class="footer-link">内容管理</router-link></li>
              <li><router-link to="/system-config" class="footer-link">系统配置</router-link></li>
              <li><router-link to="/security-center" class="footer-link">安全中心</router-link></li>
            </ul>
          </div>

          <div class="footer-links">
            <h4 class="links-title">帮助支持</h4>
            <ul class="links-list">
              <li><router-link to="/help-docs" class="footer-link">帮助文档</router-link></li>
              <li><router-link to="/faq" class="footer-link">常见问题</router-link></li>
              <li><router-link to="/contact" class="footer-link">联系我们</router-link></li>
              <li><router-link to="/feedback" class="footer-link">反馈建议</router-link></li>
              <li><router-link to="/terms" class="footer-link">服务条款</router-link></li>
            </ul>
          </div>

          <div class="footer-links">
            <h4 class="links-title">联系我们</h4>
            <ul class="links-list contact-list">
              <li class="contact-item">
                <i class="fa fa-map-marker text-primary"></i>
                <span>北京市海淀区科技园区88号</span>
              </li>
              <li class="contact-item">
                <i class="fa fa-phone text-primary"></i>
                <span>400-888-8888</span>
              </li>
              <li class="contact-item">
                <i class="fa fa-envelope text-primary"></i>
                <span>support@platform.com</span>
              </li>
              <li class="contact-item">
                <i class="fa fa-clock-o text-primary"></i>
                <span>周一至周五 9:00-18:00</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="footer-bottom">
          <p class="copyright">
            &copy; 2023 综合服务平台. 保留所有权利.
          </p>
          <div class="legal-links">
            <router-link to="/privacy" class="legal-link">隐私政策</router-link>
            <router-link to="/terms" class="legal-link">服务条款</router-link>
            <router-link to="/cookie" class="legal-link">Cookie政策</router-link>
            <router-link to="/sitemap" class="legal-link">网站地图</router-link>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'HomePage',
  data() {
    return {
      //用户名
      username: '',
      // 状态管理
      mobileMenuOpen: false,
      showSearch: false,
      isScrolled: false,
      unreadNotifications: 3,

      // 统计数据
      stats: {
        services: 24,
        users: 50000,
        uptime: 99.9
      },

      // 服务分类
      categories: ['全部', '管理工具', '数据分析', '内容创作', '系统设置', '安全中心'],
      activeCategory: '全部',

      // 服务列表
      services: [
        {
          name: '个人中心',
          desc: '管理平台用户与权限',
          iconClass: 'blue-bg text-primary',
          icon: 'fa-users',
          path: 'http://localhost:8081/',
          category: '管理工具'
        },
        {
          name: '数据报表',
          desc: '生成各类业务报表',
          iconClass: 'green-bg text-success',
          icon: 'fa-bar-chart',
          path: '/reports',
          category: '数据分析'
        },
        {
          name: '内容发布',
          desc: '管理和发布平台内容',
          iconClass: 'purple-bg text-accent',
          icon: 'fa-pencil',
          path: '/content',
          category: '内容创作',
          new: true
        },
        {
          name: '系统配置',
          desc: '平台基础设置',
          iconClass: 'orange-bg text-warning',
          icon: 'fa-cog',
          path: '/settings',
          category: '系统设置'
        },
        {
          name: '安全审计',
          desc: '查看安全日志与审计',
          iconClass: 'red-bg text-danger',
          icon: 'fa-shield',
          path: '/security',
          category: '安全中心'
        },
        {
          name: '任务调度',
          desc: '管理自动化任务',
          iconClass: 'teal-bg text-secondary',
          icon: 'fa-calendar-check-o',
          path: '/tasks',
          category: '管理工具'
        },
        {
          name: '数据导入',
          desc: '批量导入各类数据',
          iconClass: 'indigo-bg text-indigo-500',
          icon: 'fa-upload',
          path: '/import',
          category: '数据分析'
        },
        {
          name: '媒体库',
          desc: '管理图片与文件资源',
          iconClass: 'pink-bg text-pink-500',
          icon: 'fa-picture-o',
          path: '/media',
          category: '内容创作'
        },
        {
          name: 'API管理',
          desc: '配置和管理API接口',
          iconClass: 'gray-bg text-gray-600',
          icon: 'fa-plug',
          path: '/api',
          category: '系统设置'
        },
        {
          name: '权限控制',
          desc: '管理角色与权限',
          iconClass: 'yellow-bg text-yellow-600',
          icon: 'fa-key',
          path: '/permissions',
          category: '安全中心'
        }
      ],

      // 最近活动
      recentActivities: [
        {
          action: '查看了',
          service: '数据报表',
          time: '10分钟前',
          icon: 'fa-bar-chart'
        },
        {
          action: '更新了',
          service: '用户信息',
          time: '1小时前',
          icon: 'fa-user'
        },
        {
          action: '发布了',
          service: '新内容',
          time: '3小时前',
          icon: 'fa-pencil'
        }
      ],

      // 常用功能
      commonFunctions: [
        {
          name: '用户新增',
          iconClass: 'blue-bg text-primary',
          icon: 'fa-user-plus'
        },
        {
          name: '数据导出',
          iconClass: 'green-bg text-success',
          icon: 'fa-download'
        },
        {
          name: '系统消息',
          iconClass: 'purple-bg text-accent',
          icon: 'fa-bell'
        },
        {
          name: '备份恢复',
          iconClass: 'orange-bg text-warning',
          icon: 'fa-database'
        }
      ],

      // 系统状态
      systemStatus: [
        {
          name: '应用服务器',
          status: '正常',
          statusClass: 'text-success',
          barClass: 'success-bar',
          performance: 98
        },
        {
          name: '数据库',
          status: '正常',
          statusClass: 'text-success',
          barClass: 'success-bar',
          performance: 95
        },
        {
          name: '缓存服务',
          status: '良好',
          statusClass: 'text-warning',
          barClass: 'warning-bar',
          performance: 89
        },
        {
          name: '存储服务',
          status: '正常',
          statusClass: 'text-success',
          barClass: 'success-bar',
          performance: 96
        }
      ],

      // 公告列表
      notices: [
        {
          title: '平台V3.5版本更新公告',
          content: '本次更新将带来全新的数据可视化功能，优化用户体验，修复已知问题...',
          date: '2023-06-15',
          tag: '版本更新',
          tagClass: 'primary-tag',
          image: 'https://picsum.photos/id/0/600/400'
        },
        {
          title: '关于系统维护的通知',
          content: '为提升服务质量，我们将于6月20日凌晨进行系统维护，预计持续2小时...',
          date: '2023-06-10',
          tag: '系统维护',
          tagClass: 'warning-tag',
          image: 'https://picsum.photos/id/160/600/400'
        },
        {
          title: '新功能使用指南',
          content: '全新上线的智能分析功能，帮助您快速获取业务洞察，提升决策效率...',
          date: '2023-06-05',
          tag: '使用指南',
          tagClass: 'success-tag',
          image: 'https://picsum.photos/id/201/600/400'
        }
      ]
    };
  },
  computed: {
    // 过滤显示的服务
    filteredServices() {
      if (this.activeCategory === '全部') {
        return this.services;
      }
      return this.services.filter(service => service.category === this.activeCategory);
    },
  },
  methods: {
    // 导航到子服务页面
    navigateToService(path) {
      window.open(path, '_blank');
    },
    // 监听滚动事件
    handleScroll() {
      this.isScrolled = window.scrollY > 50;
    },

    loginOut() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    },
    toConsole(){
      window.location.href="/console.html";
    },
    setUsername(callBack){
      const self = this;
      request({
        url: '/user/user/getCurrentUserName',
        method: 'get',
      }).then(response => {
        if (response &&response.code === 0 && response.data) {
          localStorage.setItem('username', response.data);
           self.username = response.data;
        }
        if (callBack && typeof callBack === 'function') {
          callBack();
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    },
  },
  mounted() {
    // 监听滚动事件，用于导航栏样式变化
    window.addEventListener('scroll', this.handleScroll);
    this.setUsername();
  },
  beforeCreate() {
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style scopedd>
:root {
  --primary: #165DFF;
  --secondary: #0FC6C2;
  --accent: #722ED1;
  --success: #00B42A;
  --warning: #FF7D00;
  --danger: #F53F3F;
  --dark: #1D2129;
  --dark-2: #4E5969;
  --light-1: #F2F3F5;
  --light-2: #E5E6EB;
  --indigo-500: #6366F1;
  --pink-500: #EC4899;
  --yellow-600: #EAB308;
  --gray-600: #4B5563;
  --white: #FFFFFF;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--dark);
  background-color: var(--white);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-primary {
  color: var(--primary);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-accent {
  color: var(--accent);
}

.text-dark-2 {
  color: var(--dark-2);
}

.text-indigo-500 {
  color: var(--indigo-500);
}

.text-pink-500 {
  color: var(--pink-500);
}

.text-yellow-600 {
  color: var(--yellow-600);
}

.text-gray-600 {
  color: var(--gray-600);
}

.blue-bg {
  background-color: rgba(22, 93, 255, 0.1);
}

.green-bg {
  background-color: rgba(0, 180, 42, 0.1);
}

.purple-bg {
  background-color: rgba(114, 46, 209, 0.1);
}

.orange-bg {
  background-color: rgba(255, 125, 0, 0.1);
}

.top-notice {
  background-color: rgba(22, 93, 255, 0.05);
  color: var(--primary);
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
}

.notice-link {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 500;
}

.header {
  background-color: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.header-scrolled {
  box-shadow: var(--shadow);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--dark);
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-text {
  color: var(--white);
  font-weight: bold;
  font-size: 20px;
}

.logo-title {
  font-size: 20px;
  font-weight: bold;
}

.main-nav {
  display: flex;
  margin-left: 40px;
}

.nav-item {
  padding: 8px 12px;
  color: var(--dark-2);
  text-decoration: none;
  position: relative;
  transition: var(--transition);
  font-size: 14px;
}

.nav-item:hover {
  color: var(--primary);
}

.nav-item.active {
  color: var(--primary);
  font-weight: 500;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: var(--transition);
}

.nav-item:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  padding: 8px;
  color: var(--dark-2);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}

.action-btn:hover {
  color: var(--primary);
  background-color: var(--light-1);
}

.notification-container {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--danger);
  color: var(--white);
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.console-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.console-btn:hover {
  background-color: rgba(22, 93, 255, 0.9);
}

.user-menu {
  position: relative;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius);
  transition: var(--transition);
}

.user-btn:hover {
  background-color: var(--light-1);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: var(--transition);
}

.user-btn:hover .user-avatar {
  border-color: var(--primary);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 192px;
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
}

.user-menu:hover .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  color: var(--dark);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.dropdown-item:hover {
  background-color: var(--light-1);
}

.dropdown-item.logout {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--light-2);
  margin: 8px 0;
}

.menu-btn {
  padding: 8px;
  color: var(--dark-2);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.menu-btn:hover {
  background-color: var(--light-1);
}

.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: var(--transition);
}

.mobile-nav-open {
  max-height: 500px;
  padding: 16px 0;
}

.mobile-nav-item {
  display: block;
  padding: 8px 12px;
  color: var(--dark-2);
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
}

.mobile-nav-item:hover {
  color: var(--primary);
}

.mobile-nav-item.active {
  color: var(--primary);
  font-weight: 500;
}

.mobile-console-btn {
  margin: 8px 12px;
}

.search-container {
  max-height: 0;
  overflow: hidden;
  transition: var(--transition);
  border-top: 1px solid var(--light-2);
}

.search-open {
  max-height: 100px;
  padding: 12px 0;
}

.search-input-wrapper {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 8px 40px 8px 36px;
  border: 1px solid var(--light-2);
  border-radius: var(--radius);
  font-size: 14px;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(22, 93, 255, 0.2);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dark-2);
}

.main-content {
  flex-grow: 1;
}

.hero-section {
  padding: 48px 0 80px;
  background: linear-gradient(to bottom, rgba(22, 93, 255, 0.05), var(--white));
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-text {
  width: 100%;
  margin-bottom: 40px;
}

.hero-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 24px;
}

.hero-description {
  font-size: 18px;
  color: var(--dark-2);
  max-width: 500px;
  margin-bottom: 32px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.primary-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
}

.primary-btn:hover {
  background-color: rgba(22, 93, 255, 0.9);
  box-shadow: 0 6px 16px rgba(22, 93, 255, 0.25);
}

.secondary-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--white);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.secondary-btn:hover {
  background-color: rgba(22, 93, 255, 0.05);
}

.stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.stat-item {
  margin-bottom: 16px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  color: var(--dark-2);
}

.hero-image-container {
  width: 100%;
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  z-index: 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.hero-image-wrapper:hover {
  transform: scale(1.02);
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top right, rgba(22, 93, 255, 0.2), transparent);
  mix-blend-mode: overlay;
}

.status-badge {
  position: absolute;
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
}

.system-status {
  bottom: -24px;
  left: -24px;
  animation: pulse 2s infinite;
}

.update-status {
  top: -16px;
  right: -16px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 180, 42, 0.2);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 180, 42, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 180, 42, 0);
  }
}

.badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.badge-subtitle {
  font-size: 12px;
  color: var(--dark-2);
}

.image-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(22, 93, 255, 0.2), rgba(114, 46, 209, 0.2));
  border-radius: var(--radius-xl);
  filter: blur(64px);
  z-index: 5;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: bold;
  margin-bottom: 16px;
}

.section-description {
  font-size: 18px;
  color: var(--dark-2);
}

.services-section {
  padding: 64px 0;
  background-color: var(--white);
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.category-tab {
  padding: 8px 16px;
  background-color: var(--white);
  color: var(--dark);
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.category-tab.active {
  background-color: var(--primary);
  color: var(--white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.service-card {
  background-color: var(--white);
  border: 1px solid var(--light-2);
  border-radius: var(--radius-xl);
  padding: 24px;
  transition: var(--transition);
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.service-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.service-desc {
  font-size: 14px;
  color: var(--dark-2);
  margin-bottom: 16px;
}

.new-badge {
  display: inline-block;
  padding: 2px 8px;
  background-color: rgba(22, 93, 255, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
}

.quick-access-section {
  padding: 64px 0;
  background-color: var(--light-1);
}

.section-header-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  max-width: 100%;
  margin-bottom: 40px;
}

.see-all-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.see-all-link:hover {
  text-decoration: underline;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.access-card {
  background-color: var(--white);
  border: 1px solid var(--light-2);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
}

.card-action {
  color: var(--primary);
  font-size: 14px;
  text-decoration: none;
}

.card-action:hover {
  text-decoration: underline;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--light-2);
}

.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(22, 93, 255, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-text {
  font-size: 14px;
}

.activity-action {
  font-weight: 500;
}

.activity-time {
  font-size: 12px;
  color: var(--dark-2);
  margin-top: 2px;
}

.functions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--light-2);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  transition: var(--transition);
}

.function-item:hover {
  border-color: var(--primary);
  background-color: rgba(22, 93, 255, 0.05);
}

.function-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.function-name {
  font-size: 14px;
  text-align: center;
}

.status-label {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.system-status-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.system-status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.system-name {
  font-size: 14px;
}

.system-status {
  font-size: 12px;
  font-weight: 500;
}

.status-bar {
  width: 100%;
  height: 8px;
  background-color: var(--light-2);
  border-radius: 4px;
  overflow: hidden;
}

.status-progress {
  height: 100%;
  transition: width 0.5s ease;
}

.success-bar {
  background-color: var(--success);
}

.warning-bar {
  background-color: var(--warning);
}

.status-details-link {
  color: var(--primary);
  font-size: 14px;
  text-decoration: none;
  margin-top: 8px;
  display: inline-block;
}

.status-details-link:hover {
  text-decoration: underline;
}

.notices-section {
  padding: 64px 0;
  background-color: var(--white);
}

.notices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .notices-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.notice-card {
  border: 1px solid var(--light-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
}

.notice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.notice-image-container {
  height: 160px;
  overflow: hidden;
}

.notice-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.notice-card:hover .notice-image {
  transform: scale(1.1);
}

.notice-content {
  padding: 20px;
}

.notice-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.notice-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.primary-tag {
  background-color: rgba(22, 93, 255, 0.1);
  color: var(--primary);
}

.warning-tag {
  background-color: rgba(255, 125, 0, 0.1);
  color: var(--warning);
}

.success-tag {
  background-color: rgba(0, 180, 42, 0.1);
  color: var(--success);
}

.notice-date {
  font-size: 12px;
  color: var(--dark-2);
}

.notice-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.notice-text {
  font-size: 14px;
  color: var(--dark-2);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more-link {
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.read-more-link:hover {
  text-decoration: underline;
}

.view-all-notices {
  text-align: center;
}

.all-notices-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.all-notices-link:hover {
  text-decoration: underline;
}

.support-section {
  padding: 64px 0;
  background-color: var(--light-1);
}

.support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .support-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.support-card {
  background-color: var(--white);
  border-radius: var(--radius-xl);
  padding: 32px;
  text-align: center;
  transition: var(--transition);
}

.support-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.support-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 24px;
}

.support-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.support-desc {
  font-size: 14px;
  color: var(--dark-2);
  margin-bottom: 16px;
}

.support-link {
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.support-link:hover {
  text-decoration: underline;
}

.cta-section {
  padding: 64px 0;
  background-color: var(--primary);
  color: var(--white);
  text-align: center;
}

.cta-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: bold;
  margin-bottom: 24px;
}

.cta-description {
  font-size: 20px;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto 32px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--white);
  color: var(--primary);
  border: none;
  border-radius: var(--radius);
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cta-btn:hover {
  background-color: var(--light-1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.footer {
  background-color: var(--dark);
  color: var(--white);
  padding: 64px 0 32px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-brand .logo {
  margin-bottom: 24px;
}

.footer-brand .logo-title {
  color: var(--white);
}

.brand-description {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
  max-width: 400px;
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

.social-link:hover {
  background-color: var(--primary);
}

.links-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}

.links-list {
  list-style: none;
}

.links-list li {
  margin-bottom: 12px;
}

.footer-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: var(--transition);
}

.footer-link:hover {
  color: var(--white);
}

.contact-list .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact-item i {
  margin-top: 4px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.legal-link {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  text-decoration: none;
  transition: var(--transition);
}

.legal-link:hover {
  color: var(--white);
}

@media (max-width: 1023px) {
  .main-nav {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

@media (min-width: 1024px) {

  .hero-content {
    flex-direction: row;
    gap: 40px;
  }

  .hero-text {
    width: 50%;
    margin-bottom: 0;
  }

  .hero-image-container {
    width: 50%;
  }
}
</style>
